@import "~taro-ui/dist/style/components/segmented-control.scss";

.scheduleDetail {
  background-color: #fff;
  position: relative;
  // margin-bottom: 98pt;
  margin-bottom: 500px;
  font-family: PingFang-SC-Regular;

  .header-top {
    position: sticky;
    top: 0;
  }

  .line {
    height: 1px;
    width: calc(100vw - 112px);
    background-color: rgb(235, 235, 235);
    margin: 0 auto;
  }

  .schedule-container {
    position: relative;
    overflow: auto;

    .header {

      padding-bottom: 40px;
      border-bottom: 30px solid rgb(247, 247, 247);

      .title {
        font-size: 36px;
        text-align: left;
        margin: 48px 64px 40px 74px;
        word-break: break-all;
        line-height: 54px;
        text-align: justify;
        text-justify: distribute-all-lines; // 这行必加，兼容ie浏览器
      }

      .title:before {
        content: '';
        margin: 0 22px 0 -44px;
        display: inline-flex;
        width: 20px;
        height: 20px;
        background: rgb(43, 159, 232);
        border-radius: 50%;
      }

      .time-info {
        display: flex;
        text-align: left;
        color: #989898;
        // margin: 18pt 46pt 0 32pt;
        margin-top: 36px;
        font-size: 24px;
        line-height: 48px;
        color: rgb(51, 51, 51);

        .duration {
          color: rgb(102, 102, 102);
          margin: 0 auto;
          display: flex;

          .duration-time {
            width: 118px;
            height: 48px;
            text-align: center;
            border-radius: 24px;
            background-color: rgb(238, 241, 243);
          }
        }

        .time-info-left {
          float: left;
          margin-left: 64px;
        }

        .time-info-right {
          float: right;
          margin-right: 64px;
        }

        .days {
          display: block;
          font-size: 24px;
        }

        .times {
          font-size: 36px;
          display: block;
        }
      }
    }

    .place-detail {
      font-size: 28px;
      color: rgb(153, 153, 153);
      margin-left: 30px;

      .place {
        margin: 28px 0;
        display: flex;
        align-items: center;

        .address {
          font-size: 30px;
          color: rgb(51, 51, 51);
          line-height: 50px;
          text-align: left;
          margin-left: 88px;
          padding-right: 20px;
          width: calc(100vw - 216px);
          display: inline-block;
          vertical-align: top;
          text-align: justify;
          text-justify: distribute-all-lines; // 这行必加，兼容ie浏览器
        }
      }

      .line-long {
        width: calc(100vw - 60px);
      }

      .detail {
        margin: 28px 0 32px 0;
        display: flex;
        align-items: center;

        .describe {
          display: inline-block;
          font-size: 30px;
          line-height: 44px;
          text-align: left;
          margin-left: 88px;
          color: rgb(51, 51, 51);
          width: calc(100vw - 216px);
          vertical-align: top;
          text-align: justify;
          text-justify: distribute-all-lines; // 这行必加，兼容ie浏览器
        }
      }
    }

    .participant {
      border-top: 30px solid rgb(247, 247, 247);
      font-size: 30px;
      word-break: break-all;
      height: 148px;
      background-color: #fff;

      .participant-details {
        color: rgb(51, 51, 51);
        margin-right: 40px;
        vertical-align: top;
        text-align: justify;
        text-justify: distribute-all-lines; // 这行必加，兼容ie浏览器

        .confirm-people {
          color: rgb(0, 153, 0);
        }

        .cancel-people {
          color: rgb(255, 0, 0);
        }

        .undetermined-people {
          color: rgb(255, 102, 0);
        }
      }
    }

    .tabs_container {
      margin: 30px 40px 0 40px;

      .tab-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;

        .user-info {
          margin-right: 24px;
          margin-top: 36px;
          // margin: auto;

          .user-photo {
            width: 82px;
            height: 82px;
            // background-color: aqua;
            border-radius: 50%;
            background-size: cover;
            background-repeat: no-repeat;
            margin: 0 auto;
          }

          .user-name {
            color: rgb(51, 51, 51);
            line-height: 34px;
            font-size: 24px;
            text-align: center;
            width: 108px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .user-id {
            color: rgb(153, 153, 153);
            font-size: 20px;
            line-height: 28px;
            text-align: center;
            width: 108px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }

      .at-segmented-control {
        border: 1px solid rgb(204, 204, 204) !important;
      }

      .at-segmented-control__item+.at-segmented-control__item {
        border-left: 1px rgb(204, 204, 204) solid !important;
      }

      .at-segmented-control__item {
        color: rgb(51, 51, 51) !important;
      }

      .at-segmented-control__item--active {
        color: rgb(255, 255, 255) !important;
      }
    }

    .lg-cell-common .title {
      margin-left: 30px;
      margin-right: 60px;
      font-family: PingFang-SC-Regular;
      font-size: 28px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 50px;
      letter-spacing: 0;
      color: rgb(153, 153, 153);
      white-space: nowrap;
    }

    .lg-cell-common .right .content {
      font-family: PingFang-SC-Regular;
      font-size: 30px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 44px;
      color: #7c7c7c;
      height: 0.68267rem;
    }

    [class^="icon-"],
    [class*=" icon-"] {
      line-height: 100px;
    }

    .container_LayerOut_content_title {
      font-size: 28px;
      color: rgb(51, 51, 51);
    }

    .icon-b01701:before {
      font-size: 24px;
    }


  }


  .index-footer {
    background-color: #fff;
    display: flex;
    flex-direction: row;
    position: fixed;
    bottom: 0;
    // margin-top: 100px;
    width: 100%;
    height: 196px;
    border-top: 1px solid #f0f0f0;
    padding: 32px 30px 76px 30px;
    box-sizing: border-box;
    margin: 0 auto;

    .send-btn {
      width: 206px !important;
      font-size: 36px;
      box-sizing: border-box;
      display: inline-block;
      margin: 0 auto;
    }

    .source-btn,
    .edit-btn {
      margin-right: 30px;
    }
  }
}
